<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            font-size: 20px;
            /*
            1、启用过度，设置哪些属性进行过渡
            2、过度特点：只要属性值是数字的都可以过度，如%、em、rem、px，颜色，缩放，旋转，倾斜，透明度等
            3、这里颜色虽然是文字，但它可以转成数字，比如green，#fff，rgb(255,255,255)
            4、写法1：transition-property:width,height,background-color;给那几个属性设置过度
            5、写法2：transition-property:all;给所有属性设置过度，是已经设置存在的属性
             */
            transition-property:all;
            /*
            1、设置过度时间
            2、宽度1秒过度完，高度3秒过度完，2s把背景颜色过度完
            3、写法1“transition-duration:1s,3s,2s“：设置每个属性的时间
            4、写法2“transition-duration:1s“：设置所有属性的时间
            */
            transition-duration:1s;
        }

        /*
        鼠标移入的时候，
        宽高过度到400，
        背景颜色orange过度到green
        */
        .box1:hover{
            width: 400px;
            height: 400px;
            background-color: green;
            /*旋转4度*/
            transform: rotate(45deg);
            /*阴影*/
            box-shadow:0px 0px 10px black;
            /*透明度*/
            opacity: 1;
            /*字体大小*/
            font-size: 60px;
        }
    </style>
</head>
<body>
<div class="box1">啊啊啊啊</div>
</body>
</html>